<template>
  <div>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="one">

        <div class="two-left">
               <!-- 基本信息 -->
               
               
            <div class="essential">
              <p>基本信息</p>
              <div class="essential-information">
                <div class="essential-left">
                  <el-form-item label="姓名" prop="admin_name">
                        <el-input v-model="ruleForm.admin_name"></el-input>
                  </el-form-item>

                    <el-form-item label="性别" prop="admin_sex">
                        <el-radio-group v-model="ruleForm.admin_sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="身份证号" prop="admin_IdNumber" required>
                        <el-input v-model="ruleForm.admin_IdNumber"></el-input>
                  </el-form-item>

                </div>
                <div class="essential-right">
                  <el-form-item label="籍贯" prop="admin_address" required>
                    <el-cascader
                        v-model="ruleForm.admin_address"
                        :options="options"></el-cascader>
                  </el-form-item>


                    <el-form-item label="出生日期" required>
                        <el-col :span="11">
                        <el-form-item prop="admin_dateOfBirth">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.admin_dateOfBirth" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                        </el-col>
                    </el-form-item>
                </div>
                </div>
            </div>

            <!-- 联系方式 -->
            
            <div class="contact">
              <p>联系方式</p>
              <div class="contact-information">
                <div class="contact-left">
                    <el-form-item
                      prop="admin_email"
                      label="邮箱"
                      :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                      ]"
                    >
                      <el-input v-model="ruleForm.admin_email"></el-input>
                    </el-form-item>

                    <el-form-item label="家庭住址" prop="admin_HomeAddress" required>
                    <el-cascader
                        v-model="ruleForm.admin_HomeAddress"
                        :options="options"></el-cascader>
                  </el-form-item>


                    <el-form-item label="手机" prop="admin_cellPhoneNumber">
                        <el-input v-model="ruleForm.admin_cellPhoneNumber"></el-input>
                  </el-form-item>

                </div>
                <div class="contact-right">
                  <el-form-item label="QQ" prop="admin_qq">
                        <el-input v-model="ruleForm.admin_qq"></el-input>
                  </el-form-item>
                  <el-form-item label="微信" prop="admin_WeChat">
                        <el-input v-model="ruleForm.admin_WeChat"></el-input>
                  </el-form-item>
                </div>
                </div>
            </div>
            <!-- 其他信息 -->
            
           
            <!-- 提交 -->
          <div class="tijiao">
            <el-form-item>
            <el-button @click="resetForm('ruleForm')" class="quxiao">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" class="baocun">保存</el-button>
            
          </el-form-item>
          </div>
        </div>
        <div class="two-right">
<div class="shangchuan">上传照片:</div>
          <div class="pic">
            
              <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <el-button @click="save" class="savePic">确定上传照片</el-button>
            
            <div class="geshi">单文件大小请在1M以内，仅支持JPG、JPEG、PNG格式</div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import area from '../../../../assets/datas/area.json' //json文件的引用和使用和图片一样
import { addTeacher } from '../../../../api/newAdmin'
  export default {
    data() {
      return {
        options: area,
        ruleForm: {
          admin_name: '',
          admin_sex: '',
          admin_IdNumber:'',
          admin_address:'',
          admin_dateOfBirth: '',
          admin_email:'',
          admin_HomeAddress:'',
          admin_cellPhoneNumber:'',
          admin_qq:'',
          admin_WeChat:'',
         
        },
        dialogImageUrl: '',
        dialogVisible: false,
        rules: {
          admin_name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          admin_sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          admin_IdNumber: [
            { required: true, message: '请输入身份证号', trigger: 'blur' }
          ],
          admin_address: [
            { required: true, message: '请输入籍贯', trigger: 'blur' }
          ],
          admin_dateOfBirth: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          admin_HomeAddress: [
            { required: true, message: '请输入家庭住址', trigger: 'blur' }
          ],
          admin_cellPhoneNumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          admin_qq: [
            { required: true, message: '请输入QQ号', trigger: 'blur' }
          ],
          admin_WeChat: [
            { required: true, message: '请输入微信号', trigger: 'blur' }
          ],
         
        }
      };
    },
    
    methods: {
      
       getAddressFun(val, opt){
         return val.map(function (value, index, array) {
                for (var item of opt) {
                    if (item.value == value) { 
                        opt = item.children; 
                        return item.label; 
                    }
                }
                return null;
            });
       },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             let admin_address = this.ruleForm.admin_address
             let admin_HomeAddress = this.ruleForm.admin_HomeAddress

            //["140000", "140300", "140311   ----- [北京市，北京市，昌平区]
            admin_address = this.getAddressFun(admin_address,this.options)
            admin_HomeAddress = this.getAddressFun(admin_HomeAddress,this.options)
            admin_address = admin_address.join(' ')
            admin_HomeAddress = admin_HomeAddress.join(' ')
            this.ruleForm.admin_address = admin_address
            this.ruleForm.admin_HomeAddress = admin_HomeAddress
            

            // 添加管理员
            addTeacher(this.ruleForm).then(res=>{
              console.log('添加管理员',res)
            })
            
            console.log(this.ruleForm)//获取到的信息
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 让照片变大
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      save(){
        console.log('保存',this.dialogImageUrl)//后端保存的是图片的url
      }
    }
      
    }
  
</script>


<style lang="less" scoped>
.geshi{
  font-size: 12px;
  position: absolute;
  top: 354px;
  left: 20px;
}
.one{
  display: flex;
  justify-content: space-between;
  width: 1140px;
}
.two-left{
  height: 762px;
}
.two-right{
  width: 326px;
  height: 744px;
  position: relative;
  margin-left: 20px;
  background: #fff;
  border-radius: 8px;

}

.essential{
  width: 774px;
  height: 296px;
  padding-top: 66px;
  padding-left: 16px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
  p{
  font-size: 18px;
  // padding-top: 66px;
  padding-bottom: 10px;
}
}
.contact{
  width: 774px;
  height: 296px;
  padding-top: 66px;
  padding-left: 16px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
  p{
  font-size: 18px;
  // padding-top: 66px;
  padding-bottom: 10px;
}

}
.essential-information{

  display: flex;
  justify-content: space-evenly;
  margin-top: 16px;
  
}
.contact-information{
    justify-content: space-evenly;

  display: flex;
  margin-top: 16px;

}

.tijiao{
  float: right;
  margin-top: 30px;
  .baocun{
    width: 222px;
    height: 40px;
    margin-left: 54px;
  }
}
.two-right>.pic{
  position: relative;
  left: 26%;
  right: 50%;
  width: 200px;
  height: 150px;
  margin-top: 50px;
}
.shangchuan{
    padding: 44px 0 0 30px;
  }
</style>
<style lang="less" >
.savePic{
  position: absolute;
  top: 300px;
  left: 110px;
  width: 96px;
  height: 25px;
  border-color: #05d1c3;
  
  border-radius: 140px !important;
  span{
        position: absolute;
    top: 5px;
    left: 7px;
  }
}
.quxiao{
  background: #9a9a9a;
  span{
  color: rgb(255, 255, 255) !important;
    
  }
}
.baocun{
  span{
  color: rgb(255, 255, 255) !important;
    
  }
}
.el-input__inner{
  width: 210px;
  height: 30px;
}
</style>